<template>
  <div>
    <el-form class="content" :model="formData" label-width="160px">
      <el-form-item label="姓名">
        <span class="text--info form-detail">{{ formData.userName }}</span>
      </el-form-item>
      <el-form-item label="所属单位">
        <span class="text--info form-detail">{{ formData.deptName }}</span>
      </el-form-item>
      <el-form-item label="电话">
        <span class="text--info form-detail">{{ formData.phoneNum }}</span>
      </el-form-item>
      <el-form-item label="邮箱">
        <span class="text--info form-detail">{{ formData.email }}</span>
      </el-form-item>
      <el-form-item label="项目组角色">
        <el-select v-model="formData.proRoleCode" placeholder="请选择">
          <el-option
            id="default-option"
            v-for="item in rolesTypeList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-row justify="end" class="form__footer">
      <el-button @click="handleSubmit(false)">取消</el-button>
      <el-button type="primary" @click="handleSubmit(true)">确定</el-button>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import { updateProjectTeam, thdRoleList } from "/@/api/projects";
import NotifMessage from "/@/utils/message/notification";
import { storageLocal } from "/@/utils/storage";
export default defineComponent({
  name: "UserDetail",
  props: {
    userInfo: {
      type: Object,
      default: () => {}
    },
    rolesList: {
      type: Object,
      default: () => {}
    }
  },
  emits: ["emitClose"],
  setup(props, { emit }) {
    const formData = ref({ ...props.userInfo });
    const rolesTypeList = ref();
    const roleType = ref({});
    let formInline = reactive({
      projectManageId: storageLocal.getItem("projectInfo")?.id,
      sectionId: "A",
      pageNum: 1,
      pageSize: 0
    });
    // 确认提交
    const handleSubmit = async (isSubmit: boolean) => {
      if (isSubmit) {
        if (formData.value.proRoleCode === props.userInfo.proRoleCode) {
          emit("emitClose", isSubmit);
        } else {
          const params = {
            proRoleCode: formData.value.proRoleCode,
            proRoleName: roleType.value[formData.value.proRoleCode + ""],
            id: formData.value.id
          };
          try {
            const { code, message } = await updateProjectTeam(params);
            if (code === 200) {
              NotifMessage.success(message);
              emit("emitClose", isSubmit);
            }
          } catch (err) {
            console.log("error", err);
          }
        }
      } else {
        emit("emitClose", isSubmit);
      }
    };

    //获取角色列表
    async function getTableData(obj: object = {}) {
      try {
        const { code, data } = await thdRoleList(obj);
        if (code === 200) {
          rolesTypeList.value = data.list;
          rolesTypeList.value.forEach(item => {
            item.id += "";
            roleType.value[item.id] = item.roleName;
          });
        }
      } catch (err) {
        console.log(err);
      }
    }
    getTableData(formInline);
    return {
      formData,
      rolesTypeList,
      handleSubmit,
      getTableData
    };
  }
});
</script>
<style lang="scss" scoped></style>
